<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0630-JS作业-注册输入验证-螺旋</title>
	<style type="text/css">
		html {font-family: "Microsoft YaHei";}
		body,p,ul{margin: 0;}
		ul{padding: 0;}
		li{list-style: none}
		a {
			text-decoration: none;
			color: #006eff;
		}
		.clearfix:after{
			display: block;
			content: "";
			clear: both;
		}
		.wrap{
			width: 330px;
			margin: 0 auto;
			padding-top: 30px;
		}
		.wrap h2{
			padding: 20px 0;
			text-align: center;
		}
		form .ibox,form .ibox li{
			width: 100%;
		}
		form .ibox li{
			position: relative;
		}
		form .ibox li i{
			display: none;
			position: absolute;
			right: 0;
			top: 18px;
			width: 20px;
			height: 30px;
			background: url("images/tf.png") no-repeat top/20px;
		}
		form .ibox li i.codei{
			top: 0;
			right: 70px;
		}
		form p{
			font-size: 12px;
			color: #b0b0b0;
			text-align: right;
		}
		form input{
			width: 320px;
			height: 30px;
			margin-bottom: 18px;
			padding-left: 10px;
			font-size: 18px;
			color: #666;
			line-height: 30px;
			border: none;
			border-bottom: 1px solid #006eff;
			outline: none;
		}
		form .tcode{
			float: left;
			width: 250px;
			border: none;
			vertical-align: middle;
		}
		form .codepic{
			float: right;
			width: 60px;
			height: 30px;
			padding: 0;
			border: none;
			vertical-align: middle;
			cursor: pointer;
		}
		form .submit{
			width: 100%;
			height: 40px;
			margin: 0;
			padding: 0;
			border: 0;
			background-color: #006eff;
			font-size: 16px;
			color: #fff;
			line-height: 40px;
			text-align: center;
			border-radius: 5px;
			cursor: pointer;
		}
		.text{
			padding-top: 5px;
			font-size: 12px;
			color: #666;
			text-align: center;
		}
		.cright{
			position: relative;
			width: 100px;
			margin: 30px auto 0;
			font-size: 14px;
			color: #b0b0b0;
			line-height: 21px;
			text-align: center;
		}
		.cright:before,.cright:after{
			display: block;
			position: absolute;
			top: 10px;
			width: 115px;
			height: 1px;
			background-color: #b0b0b0;
			content: "";
		}
		.cright:before{
			left: -115px;
		}
		.cright:after{
			right: -115px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<h2>新用户注册</h2>
		<form action="" method="post" name="">
			<ul class="ibox">
				<li>
					<p>请输入11位手机号码</p>
					<input type="text" placeholder="手机号码" name="phone">
					<i></i>
				</li>
				<li>
					<p>可包含 中文 英文 数字 下划线 长度2-12位</p>
					<input type="text" placeholder="帐号名称" name="acc">
					<i></i>
				</li>
				<li>
					<p>至少包含 1个数字 1个字母或特殊符号 长度6-18位</p>
					<input type="text" placeholder="设置密码" name="pwd">
					<i></i>
				</li>
				<li>
					<p>再次输入相同的密码</p>
					<input type="text" placeholder="再次输入密码" name="rpwd">
					<i></i>
				</li>
				<li>
					<p>例如 example@qq.com</p>
					<input type="text" placeholder="邮箱" name="email">
					<i></i>
				</li>
				<li class="clearfix">
					<input type="text" placeholder="验证码" class="tcode" name="tcode">
					<img src="images/code.jpg" alt="2nvc" title="点击更换验证码" class="codepic">
					<i class="codei"></i>
				</li>
			</ul>
			<div class="submit">注 册</div>
		</form>
		<p class="text">点击“注册”按钮，即代表您同意<a href="">《用户协议》</a>。</p>
		<div class="cright">版权©螺旋</div>
	</div>
</body>
<script>
	var oIbox = document.getElementsByClassName('ibox')[0],
        oIboxLi = oIbox.getElementsByTagName('li'),
        oInput = oIbox.getElementsByTagName('input'),
		oSubBtn = document.getElementsByClassName('submit')[0],
        inputL = oInput.length,
        index,num,
		aCheck = [
            [0,/^1[34578]\d{9}$/],
            [0,/^[a-zA-Z0-9\u4E00-\u9FA5_]{2,12}$/],
            [0,/^(?=.*\d)(?=.*[a-zA-Z!@#$%^&*?_]).{6,18}$/],
            [1],//检查重输密码
            [0,/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/],
            [2]//检查验证码
		];
  
	for(var i=0;i<inputL;i++){
		(function(i){
                oInput[i].onblur = function(){
                    index = i;//获取当前节点的索引值
                    if(aCheck[i][0] === 0){
                        fnSwich(aCheck[i][1],oInput[i].value);
                    }else if(aCheck[i][0] === 1){//检查重输密码
                        if(oInput[i].value === oInput[2].value && oInput[i].value != ''){
							fnOk();
                        }else{
                            fnWro();
                        }
                    }else if(aCheck[i][0] === 2){//检查验证码
                        if(oInput[i].value === oIboxLi[5].getElementsByTagName('img')[0].alt){
                            fnOk();
                        }else{
                            fnWro();
                        }
                    }
                };
		})(i);
	}
	
    function fnSwich(check,val){
        if(check.test(val)){
            fnOk();
        }else{
            fnWro();
        }
    }
    function fnOk(){
        oIboxLi[index].getElementsByTagName('i')[0].style.display = 'block';
        oIboxLi[index].getElementsByTagName('i')[0].style.backgroundPositionY = '0px';
    }
    function fnWro(){
        oIboxLi[index].getElementsByTagName('i')[0].style.display = 'block';
        oIboxLi[index].getElementsByTagName('i')[0].style.backgroundPositionY = '-31px';
    }

    oSubBtn.onclick = function(){//点击注册按钮
        num = 0;
	    for(var i=0;i<inputL;i++){
            oInput[i].focus();
            oInput[i].blur();
            if(oIboxLi[i].getElementsByTagName('i')[0].style.backgroundPositionY === '0px'){
                num++;
            }
	    }
	    if(num === inputL){
            console.log('提交');
	    }else{
            console.log('填写有误');
        }
    }
</script>
</html>